<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<scroll-view class="accountPopupBox" :style="{ maxHeight: heightNum ? heightNum : '' }" scroll-y="true" :show-scrollbar="false" @touchmove.stop scroll-top="0">
			<view class="status_bar" v-if="isShowBar"></view>
			<view class="trackingDetailsZhuti">
				<!-- 导出 -->
				<view class="daochuBox">
					<view class="daochuBoxL">
						<view>{{ i18n.ctwfont4 }}:</view>
						<view class="daochuBoxLNum">
							<view>{{ cardArrList.billCode }}</view>
							<view class="daochuBoxLNumBtn">Export</view>
						</view>
					</view>
					<!-- <uni-icons type="closeempty" size="24" style="margin-right: 5px;" @tap="cls"></uni-icons> -->
					<view class="daochuBoxR">
						<view>{{ i18n.ctwfont21 }}</view>
						<view class="daochuBoxLNumTwo">
							<view>{{ cardArrList.billCode }}</view>
							<view class="daochuBoxLNumBtnTwo" @tap="guiHao">{{ i18n.ctwfont64 }}</view>
						</view>
					</view>
				</view>
				<view class="cardBoxArr">
					<view>
						<view class="cardBoxItem">
							<view class="">
								{{ i18n.ctwfont4 }}:
								<text :selectable="true" style="color: #fff; margin-left: 10px;">{{ cardArrList.billCode }}</text>
							</view>
							<view class="">
								<button size="mini" @tap="getImg(cardArrList)" plain class="chaBtn" type="default">
									<uni-icons type="image" size="16" color="#fff" style="margin-right: 5px;"></uni-icons>
									{{ i18n.ctwfont48 }}
								</button>
							</view>
						</view>
						<view class="cardBoxneiron">
							<uni-row>
								<uni-col :span="24">
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont21 }}</view>
										<view class="cardBoxneironTextR">{{ cardArrList.orderTime }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont8 }}</view>
										<view class="cardBoxneironTextR">{{ cardArrList.orderTime }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont9 }}</view>
										<view class="cardBoxneironTextR">{{ paymentMethod(cardArrList.paymentTypeName) }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont36 }}</view>
										<view class="cardBoxneironTextR">{{ cardArrList.deliverModeName === '供应商送货' ? i18n.ctwfont39 : '' }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont37 }}</view>
										<view class="cardBoxneironTextR">{{ cardArrList.actualReceiptAuditTime }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont11 }}</view>
										<view class="cardBoxneironTextR">{{ paymentMethod(cardArrList.paymentTypeName) }}</view>
									</view>
									<view class="cardBoxneironText">
										<view class="cardBoxneironTextL">{{ i18n.ctwfont5 }}</view>
										<view class="cardBoxneironTextR">{{ cardArrList.oldBillCode }}</view>
									</view>
								</uni-col>
							</uni-row>
						</view>
						<view class="cardBoxneironTextTwo" style="margin-bottom: 10px;background-color: #ffedef;">
							<view class="cardBoxneironTextL">{{ i18n.ctwfont66 }}</view>
							<view class="cardBoxneironTextR">{{ type(cardArrList.orderStatusType) }}</view>
						</view>
					</view>
				</view>
				<view class="detailsBoxZho">
					<view class="detailsBoxZhoTitle" @tap="showBoxOne = !showBoxOne">
						<view class="detailsBoxZhoTitleL">{{ i18n.ctwfont2 }}</view>
						<view class="detailsBoxZhoTitleR"><uni-icons type="bottom" color="#fff" size="20"></uni-icons></view>
					</view>
					<view v-show="showBoxOne">
						<view class="detailsBoxZhoText" style="margin-top: 5px;">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont14 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.trackingNumber }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont15 }}</view>
							<view class="detailsBoxZhoTextR">{{ delivery(cardArrList.deliveryAddressName) }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont17 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.fitOutNo }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont18 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.currencyTypeName }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont24 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont19 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont20 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont22 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.operation }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont23 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont26 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont27 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.remark }}</view>
						</view>
					</view>
				</view>
				<view class="detailsBoxZho" style="padding-bottom: 1px;">
					<view class="detailsBoxZhoTitle" @tap="showBoxThree = !showBoxThree">
						<view class="detailsBoxZhoTitleL">{{ i18n.ctwfont28 }}</view>
						<view class="detailsBoxZhoTitleR"><uni-icons type="bottom" color="#fff" size="20"></uni-icons></view>
					</view>
					<view class="cardBoxTable">
						<view class="loadingBox" v-if="loading"><uni-load-more :showText="false" color="#333" status="loading"></uni-load-more></view>
						<uni-table v-else emptyText="ไม่มีข้อมูลแสดง">
							<uni-tr>
								<uni-th v-for="item in tableThArr" :key="item" align="center" height="14" bg="#FFC7CE" color="#424451">{{ item }}</uni-th>
							</uni-tr>
							<!-- 表格数据行 -->
							<uni-tr v-for="(item, index) in cardArrListTable" :key="index">
								<uni-td align="center">{{ item.orderCode }}</uni-td>
								<uni-td align="center">{{ item.payDate }}</uni-td>
								<uni-td align="center">{{ item.exchangeRate }}</uni-td>
								<uni-td align="center">{{ item.remittanceStatus }}</uni-td>
								<uni-td align="center">{{ item.payType }}</uni-td>
								<uni-td align="center">{{ item.account }}</uni-td>
								<uni-td align="center">{{ item.accountName }}</uni-td>
								<uni-td align="center">{{ item.accountBank }}</uni-td>
								<uni-td align="center">{{ item.payMoney }}</uni-td>
								<uni-td align="center">{{ item.mark }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
				<view class="detailsBoxZho">
					<view class="detailsBoxZhoTitle" @tap="showBoxFive = !showBoxFive">
						<view class="detailsBoxZhoTitleL">{{ i18n.ctwfont35 }}</view>
						<view class="detailsBoxZhoTitleR"><uni-icons type="bottom" color="#fff" size="20"></uni-icons></view>
					</view>
					<view v-show="showBoxFive">
						<view class="detailsBoxZhoText" style="margin-top: 5px;">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont36 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.deliverModeName === '供应商送货' ? i18n.ctwfont39 : '' }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont37 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.actualReceiptAuditTime }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont38 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.storeHouseNumber }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont43 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.supplier }}</view>
						</view>
						<view class="lineBox"></view>
						<view class="detailsBoxZhoText">
							<view class="detailsBoxZhoTextL">{{ i18n.ctwfont40 }}</view>
							<view class="detailsBoxZhoTextR">{{ cardArrList.supplierPhone }}</view>
						</view>
						<view style="height: 10px;"></view>
					</view>
				</view>
				<view class="bottomBack" @tap="cls">
					<uni-icons type="back" color="#cd001b" size="16" style="margin-right: 5px;"></uni-icons>
					<view>{{ this.$t('orderTracking.ctwfont35') }}</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="guiHaoPopup" type="center" :animation="false">
			<view class="guiHaoPopupBox">
				<view
					class="guiHaoPopupBoxItem"
					@tap="isguiHaoPopupBox(item)"
					:class="guiHaoListShow == item ? 'guiHaoPopupBoxItemBg' : ''"
					v-for="(item, index) in guiHaoList"
					:key="index"
				>
					{{ item }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<style lang="scss" scoped>
::v-deep .uni-collapse-cell--open {
	background-color: #fbfbfb;
}
::v-deep .uni-collapse-cell--hide {
	height: 30px;
}
::v-deep .uni-collapse-cell {
	background-color: #fbfbfb;
	border: none;
}
::v-deep .uni-collapse-cell__title:active {
	background-color: #fbfbfb;
}
::v-deep .uni-collapse-cell__title {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	justify-content: flex-start;
}
::v-deep .uni-collapse-cell__title-text {
	font-size: $uni-font-size-custom-e;
	// font-weight: 600;
	color: #474956;
	flex: none;
}
::v-deep .uni-collapse-cell__title-arrow {
	margin-left: 5px;
	height: 30px;
}
.status_bar {
	height: var(--status-bar-height);
	background-color: #fbfbff;
	width: 100%;
}
.accountPopupBox {
	min-height: 50px;
	max-height: 605px;
	background-color: #fbfbfb;
	border-radius: 5px;
	box-sizing: border-box;
	overflow-y: scroll;
}
.guiHaoPopupBox {
	width: 500rpx;
	height: 500rpx;
	overflow-y: scroll;
	.guiHaoPopupBoxItem {
		width: 100%;
		padding: 15px 0;
		border-radius: 30px;
		color: #cbcbcb;
		background-color: #f2f2f2;
		font-size: $uni-font-size-custom-d;
		text-align: center;
		margin-bottom: 25px;
	}

	.guiHaoPopupBoxItemBg {
		color: #fff;
		background-color: #cd001b;
	}
}
.trackingDetailsZhuti {
	padding: 0 15px;
	box-sizing: border-box;
	margin-bottom: 80px;
	.lineBox {
		border-top: 1px solid #cbcbcb;
		margin: 5px 0;
	}
	.daochuBox {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		margin: 15px 0;
		.daochuBoxL {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			// align-items: center;
			font-size: $uni-font-size-custom-e;
			color: #424451;
			font-weight: 700;
			.daochuBoxLNum {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #cd001b;

				.daochuBoxLNumBtn {
					background-color: #aeb0b3;
					font-size: $uni-font-size-custom-c;
					padding: 0 5px;
					border-radius: 5px;
					color: #fff;
				}
			}
		}
		.daochuBoxR {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			padding: 5px;
			box-sizing: border-box;
			margin-left: 10px;
			.daochuBoxLNumTwo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #cd001b;

				.daochuBoxLNumBtnTwo {
					background-color: #cd001b;
					font-size: $uni-font-size-custom-c;
					padding: 0 12px;
					border-radius: 20px;
					color: #fff;
				}
			}
		}
	}
	.detailsBoxZho {
		border-radius: 5px;
		background-color: #fbfbfb;
		overflow: hidden;
		margin-bottom: 20px;
		padding-bottom: 5px;
		box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.2);
		.detailsBoxZhoTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6px 10px;
			background-color: #f77687;
			font-size: $uni-font-size-custom-e;
			color: #fff;
			.detailsBoxZhoTitleL {
				min-width: 150px;
			}
		}
		.detailsBoxZhoText {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 2px 10px;
			.detailsBoxZhoTextL {
				font-size: $uni-font-size-custom-d;
				color: #878891;
			}
			.detailsBoxZhoTextR {
				font-size: $uni-font-size-custom-d;
				color: #424451;
			}
		}
		.cardBoxTable {
			background-color: #fbfbfb;

			// overflow: auto;
			.loadingBox {
				height: 200px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottomBack {
		color: #cd001b;
		font-size: $uni-font-size-custom-d;
		display: flex;
		align-items: center;
	}
	.cardBoxArr {
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid #f3f3f3;
		overflow: hidden;
		margin-bottom: 15px;
		box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.2);
		.cardBoxItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;
			height: 35px;
			background-color: #f77687;
			font-size: $uni-font-size-custom-d;
			color: #fff;
			.chaBtn {
				padding: 0 10px;
				border-radius: 5px;
				color: #ffffff;
				line-height: 1.8;
				margin-top: 3px;
				border: 1px solid #f77687;
			}
		}
		.cardBoxneironTextTwo {
			display: flex;
			height: 25px;
			line-height: 25px;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			.cardBoxneironTextL {
				font-size: $uni-font-size-custom-b;
				line-height: 14px;
				color: #71727c;
			}
			.cardBoxneironTextR {
				font-size: $uni-font-size-custom-b;
				color: #298a1b;
				line-height: 14px;
			}
			.cardBoxneironTextBtn {
				width: 100%;
				background-color: #0f2671;
				padding: 2px 15px;
				font-size: $uni-font-size-custom-b;
				border-radius: 10px;
				color: #ffffff;
				line-height: 1.6;
				// margin-top: 20px;
			}
			.cardBoxneironTextBtn2 {
				background-color: #ff576d;
				padding: 2px 15px;
				border-radius: 10px;
				font-size: $uni-font-size-custom-b;
				color: #fff;
				line-height: 1.7;
				// margin-top: 20px;
			}
		}
		.cardBoxneiron {
			padding: 10px 10px 0 10px;
			box-sizing: border-box;
			.cardBoxneironText {
				display: flex;
				height: 25px;
				line-height: 25px;
				justify-content: space-between;
				align-items: center;
				.cardBoxneironTextL {
					font-size: $uni-font-size-custom-b;
					line-height: 14px;
					color: #71727c;
				}
				.cardBoxneironTextR {
					font-size: $uni-font-size-custom-b;
					line-height: 14px;
				}
			}
		}
	}
}
</style>
<script>
import baseFont from '@/utils/baseFont.js';
import vTable from '@/components/v-table/table.vue';
export default {
	extends: baseFont,
	props: ['cardArrList', 'heightNum', 'isShowBar'],
	data: function() {
		return {
			guiHaoList: ['RD-12345678', 'RD-87654321', 'OC-12345678'],
			guiHaoListShow: 'RD-12345678',
			showBoxOne: true,
			showBoxTwo: true,
			showBoxThree: true,
			showBoxFour: true,
			showBoxFive: true,
			loading: false,
			cardArrListTable: [
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				},
				{
					orderCode: 0,
					payDate: 0,
					remittanceStatus: '21',
					payType: 'oo',
					account: 0,
					accountName: '123',
					accountBank: 'sdas',
					payMoney: 99,
					mark: '321'
				}
			]
		};
	},
	created() {
		this.loading = true;
		setTimeout(() => {
			this.loading = false;
		}, 2000);
	},
	components: { vTable },
	computed: {
		i18n() {
			return this.$t('orderDetails');
		},
		totalCost() {
			return function(item) {
				let ter = '';
				if (Number(item.switchPaidData) === 1) {
					ter = item.paidAmount === 0 || item.paidAmount === null ? '' : item.paidAmount;
				} else {
					ter = item.tmpAmount === 0 || item.tmpAmount === null ? '' : item.tmpAmount;
				}
				return ter;
			};
		},
		Balance() {
			return function(item) {
				let ter = '';
				if (Number(item.switchPaidData) === 1) {
					ter = item.paidBalance === 0 || item.paidBalance === null ? '' : item.paidBalance;
				} else {
					ter = item.remainingAmount === 0 || item.remainingAmount === null ? '' : item.remainingAmount;
				}
				return ter;
			};
		},
		type() {
			return function(val) {
				if (val) {
					let text = '';
					if (Number(val) === 1) {
						text = this.$t('maps').ctwfont27;
					} else if (Number(val) === 2) {
						text = this.$t('maps').ctwfont9;
					} else if (Number(val) === 3) {
						text = this.$t('maps').ctwfont10;
					} else if (Number(val) === 4) {
						text = this.$t('maps').ctwfont29;
					} else if (Number(val) === 5) {
						text = this.$t('maps').ctwfont13;
					} else {
						text = this.$t('maps').ctwfont31;
					}
					return text;
				} else {
					return '';
				}
			};
		},
		// 支付方式
		paymentMethod() {
			return function(val) {
				if (val === '急转') {
					return this.$t('orderDetails').ctwfont51;
				} else if (val === '转账') {
					return this.$t('orderDetails').ctwfont52;
				} else if (val === '先付款再送货') {
					return this.$t('orderDetails').ctwfont53;
				} else {
					return val;
				}
			};
		},
		// 运输方式
		transport() {
			return function(val) {
				if (val === '海运') {
					return this.$t('maps').ctwfont39;
				} else if (val === '空运') {
					return this.$t('maps').ctwfont40;
				} else if (val === 'EK') {
					return this.$t('maps').ctwfont41;
				} else {
					return val;
				}
			};
		},
		// 交货地点
		delivery() {
			return function(val) {
				if (val === '广州仓库') {
					return this.$t('orderDetails').ctwfont56;
				} else if (val === '义乌仓库') {
					return this.$t('orderDetails').ctwfont57;
				} else if (val === '东莞仓库') {
					return this.$t('orderDetails').ctwfont58;
				} else if (val === '佛山仓库') {
					return this.$t('orderDetails').ctwfont59;
				} else {
					return val;
				}
			};
		},
		// 处理送货时间
		deliveryTimeFn() {
			return function(val) {
				if (val) {
					return val.substring(0, 10);
				}
			};
		},
		tableThArr() {
			const list = [
				this.i18n.ctwfont4,
				this.i18n.ctwfont5,
				this.i18n.ctwfont6,
				this.i18n.ctwfont19,
				this.i18n.ctwfont12,
				this.i18n.ctwfont13,
				this.i18n.ctwfont14,
				this.i18n.ctwfont15,
				this.i18n.ctwfont7,
				this.i18n.ctwfont16
			];
			return list;
		}
	},
	methods: {
		// 预览图片
		getImg(img) {
			if (img) {
				// plus.nativeUI.previewImage([img]);
				// 预览图片
				uni.previewImage({
					urls: [img.goodsListImage]
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			}
		},
		cls() {
			this.$emit('closeCardArr', true);
		},
		guiHao() {
			this.$refs.guiHaoPopup.open();
		},
		isguiHaoPopupBox(item) {
			if (this.guiHaoListShow != item) {
				this.guiHaoListShow = item;
				this.$refs.guiHaoPopup.close();
			}
		}
	}
};
</script>
